【Vue+FastAPI+MySQL的迷你Demo】 |
您所在的位置：网站首页 › anaconda 没有fastapi组件 › 【Vue+FastAPI+MySQL的迷你Demo】 |
|
Vue+FastAPI+MySQL的迷你Demo
主要思路：监听用户名的输入值变化并调用api查询数据库，
如果用户名已存在则返回false
注意事项：网上很多装各种软件的教程，在这里就不赘述了。
vue.js要使用网盘里那个，因为方便。MySQL和fastapi跑的是默认端口，GoLive不知道是不是默认的5000，如果不是就改一下user.py里面的返回头吧，不然会有跨域问题。
SQL文件的使用就自己下一个DataGrip，按照教程连接再导入就行，新建数据库的那几条语句就不在文章里写了，如果后续有需要可以评论，我再详细教吧
vue-2.6.12.js:
链接：https://pan.baidu.com/s/1Rq_eFx8AFfJV3UwYYWe_zQ?pwd=1234
提取码：1234
项目目录： Demo:. |–api |–user.py |–lib |–vue-2.6.12.js |–sql |–test.sql |–demo.html 所需软件： VSCode 安装 LiveServer 插件Anaconda 创建WebAPI虚拟环境，并安装FastAPI[all]MySQL 创建一名为test的database 前端页面部分按照上述创建目录结构，并把vue**.js放入。 注意，在跑前端的时候要点击VSC右下角的GoLive！ 前端代码如下： DOCTYPE html> Demo const vm = new Vue({ el: '#app', data: { username: 'hq', }, watch: { username(newValue, oldValue) { const xhr = new XMLHttpRequest(); xhr.onreadystatechange = function () { if(xhr.readyState == 4 && xhr.status == 200) { const res = JSON.parse(xhr.responseText); if (res.exit) { console.log("已存在"); } else { console.log("未存在"); } } }; xhr.open("get", "http://localhost:8000/test/?un=" + this.username, true); xhr.send(); }, }, }); 后端python部分 conda activate WebAPI cd api uvicorn user:app --reload后端代码如下： from fastapi import FastAPI, Query, Response import pymysql cur = pymysql.connect(host="localhost", user="root", password="自己的密码", database="test", charset="GBK").cursor() cur.execute("select username from user") usernames = cur.fetchall() cur.close() pymysql.connect(host="localhost", user="root", password="自己的密码", database="heima-vue2-vue3-study", charset="GBK").close() app = FastAPI() @app.get("/test/") async def root(response: Response, un=Query(None)): response.headers["Access-Control-Allow-Origin"] = 'http://localhost:5500' exit = False for username in usernames: if(un == username[0]): exit = True break return { "exit": exit, }; 数据库部分SQL代码如下： create table user( id int, username varchar(40) ); alter table user character set GBK; insert into user(id,username) values(1,'h'); insert into user(id,username) values(2,'jh'); insert into user(id,username) values(3,'kf'); insert into user(id,username) values(4,'ld'); insert into user(id,username) values(5,'nx'); |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
| CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |